<template>
      <div class="main_other">
         <div class="hot">
             <div class="hot_l">
                 <span class="iconfont icon-xin"></span>
                 <span>定位失败</span>
             </div>
             <div class="hot_r">
               <span class="iconfont icon-diqiu"></span>
               <span>必游榜单</span>
             </div>
         </div>
         <div class="bg_hot"></div>
        <!--本周热门榜单-->
          <div class="hot_bdan">
                <div class="hot_top">
                    <div class="left">
                      <span class="iconfont icon-remen"></span>
                      <span style="font-size: .16rem;">本周热门榜单</span>
                    </div>
                    <span class="right">全部榜单></span>
                </div>
                <ul class="hot_bott">
                       <li v-for="(item,index) in hotbdan" :key="item.id">
                          <img :src="item.imgUrl" alt="">
                          <p>{{item.desc}}</p>
                          <p><span>￥{{item.price}}</span>起</p>
                       </li>
                </ul>
          </div>
        <div class="bg_hot"></div>
        <!--猜你喜欢部分-->
        <div class="yLike">
            <div class="yLike_tit">
               <span class="iconfont icon-xin" style="color:red;"></span>
               <span>猜你喜欢</span>
            </div>
            <router-link
              class="yLike_list"
              v-for="(item,index) in yLike"
              :key="item.id"
              :to="'/detail/'+item.id"
              tag="div"
            >
              <div class="box_list">
                 <img class="list_img" :src="item.imgUrl" alt="">
                 <div class="yLike_txt">
                     <p class="t1">{{item.desc}}</p>
                     <p class="t2"><span>******</span><span>{{item.num}}条评论</span></p>
                     <p class="t3"><i>￥</i><span>{{item.price}}</span>起</p>
                 </div>
                 <div class="yLike-city"><span>{{item.address}}</span></div>
              </div>
              <p class="yLike_foo">{{item.text}}</p>
            </router-link>
        </div>
      </div>
</template>

<script>
    export default {
        name: "Other",
        props:{
          hotbdan:Array,
          yLike:Array,
        },
        data () {
            return {
              // hotbdan:[
              //   {
              //     "id": "0001",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
              //     "desc": "故宫",
              //     "price": 14
              //   },
              //   {
              //     "id": "0002",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",
              //     "desc": "八达岭长城",
              //     "price": 350
              //   },
              //   {
              //     "id": "0003",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_250x250_ecfa0df2.jpg",
              //     "desc": "水立方",
              //     "price": 250
              //   },
              //   {
              //     "id": "0004",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
              //     "desc": "南山滑雪场",
              //     "price": 250
              //   },
              //   {
              //     "id": "0005",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
              //     "desc": "南山滑雪场",
              //     "price": 250
              //   }
              // ],
              // yLike: [
              //   { "id": "0001",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_200x200_9638020d.jpg",
              //     "desc": "渔阳滑雪场",
              //     "num": 532,
              //     "price": 79.5,
              //     "address": "平谷区",
              //     "text": "世界五大宫之首,穿越与您近在咫尺"
              //   },
              //   { "id": "0002",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
              //     "desc": "故宫",
              //     "num": 345,
              //     "price": 345.5,
              //     "address": "东城区",
              //     "text": "世界五大宫之首,穿越与您近在咫尺"
              //   },
              //   { "id": "0003",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1709/e4/e48857f2ce5e53a7a3.img.jpg_200x200_8ee069fe.jpg",
              //     "desc": "远去的恐龙",
              //     "num": 23535,
              //     "price": 45.5,
              //     "address": "东城区",
              //     "text": "一部不可思议的巨制演绎作品"
              //   },
              //   { "id": "0004",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1602/67/67feeab24cfc82bb90.water.jpg_200x200_af2a01b1.jpg",
              //     "desc": "太平洋海底世界",
              //     "num": 334545,
              //     "price": 345.5,
              //     "address": "西城区",
              //     "text": ""
              //   },
              //   { "id": "0005",
              //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1507/36/ce3d2d6c9ab44d67ae68d940b8781829.water.jpg_200x200_0938a8f2.jpg",
              //     "desc": "北京野生动物园",
              //     "num": 3434645,
              //     "price": 66,
              //     "address": "大兴区",
              //     "text": "敢于从林之王近距离接触吗？"
              //   }
              // ]
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .hot{
      width: 100%
      border-top:1px  solid #cacaca;
      height:.5rem;
      display :flex;
      text-align:center;
      line-height :.5rem;
      color:#6f6f6f;
      font-size :.14rem;
      .hot_l{
        width: 50%
        box-sizing :border-box;
        border-right:1px solid #cacaca;
      }
      .hot_r{
        width: 50%;
        text-align:center;
      }
    }
    .bg_hot{
      width: 100%;
      height:.12rem;
      background:#eaeaea;

    }
  //热门榜单
    .hot_bdan{
      width: 100%;

      .hot_top{
        display:flex;
        justify-content :space-between;
        line-height :.4rem;
         .left{
           .icon-remen{color:orangered;}
           margin-left :.1rem;

         }
        .right{
          margin-right:.1rem;
        }

      }
      .hot_bott{
        overflow-x:scroll;
        white-space:nowrap;
        padding-bottom :.1rem;
        li:nth-of-type(1){
          margin-left:.1rem;
        }
         li{
           display:inline-block;
           text-align :center;
           margin:.05rem;
           img{
             width: 1rem;
             height:1rem;
           }
           p{
             margin-top:.05rem;
            span{
              color:#ff8300;
            }
           }
         }
      }
    }
   //猜你喜欢部分
   .yLike{
       .yLike_tit{
         line-height :.4rem;
         padding-left:.05rem;
         font-size :.16rem;
       }
        .yLike_list{
          padding-top:.1rem;
          border-bottom:1px solid gainsboro;
         .yLike_foo{
           line-height :.4rem;
           text-align :center;
           color:#f55;
         }
       .box_list {
         display: flex;
         .list_img{
           margin-left:.1rem;
           width:1rem;height:1rem;
         }
         .yLike-city{
           align-self :flex-end;
           span{
             display :inline-block;
             margin-bottom:.15rem;
             margin-right:.2rem;
           }
         }
         .yLike_txt{
           flex-grow: 1;
           margin-left:.1rem;
           .t1{line-height:.44rem;font-size :.16rem;}
           .t2 span{margin-right:.05rem; font-size :.12rem;}
           .t3{line-height:.5rem;
              i{color:#ff8300;}
              span{font-size:.18rem;color:#ff8300;}
           }
         }

       }
     }
   }
</style>
